import {designPage, reactive} from "@peryl/react-compose";
import {i18n, Plc, PlcGroup, PlcIndex, Table} from "plain-design";
import {PlainObject} from "@peryl/utils/event";
import {DemoRow} from "../../common/DemoRow";
import {useDemoData} from "../../common/useDemoData";

export const Demo1 = designPage(() => {

  const cols = new Array(40).fill(null).map((_, i) => ({ title: `列_${i + 1}`, field: `field_${i}` }));
  const data = new Array(100).fill(null).map((_, i) => cols.reduce((prev, item) => {
    prev[item.field] = `${item.title},行_${i}`;
    return prev;
  }, {} as PlainObject));
  const fixedData = [data.pop()!];

  const state = reactive({
    data,
  });

  return () => (
    <DemoRow title={i18n.$intl('page.sortList.title1').d('')}>
      <Table
        showRows={5}
        v-model:data={state.data}
        summaryData={fixedData}
        colDraggable
        rowDraggable
        border
        virtualColumn
        virtual
        onClickRowDraggier={() => {console.log('click row draggier');}}
        onClickColDraggier={() => {console.log('click col draggier');}}
      >
        <PlcIndex key="index"/>
        {cols.map((col, index) => (
          <Plc title={col.title} field={col.field} key={col.field} fixed={index === 0 ? 'left' : index === cols.length - 1 ? 'right' : undefined}/>
        ))}
      </Table>
    </DemoRow>
  );
});

export const Demo2 = designPage(() => {

  const demoData = useDemoData('data/data-1.json', { onLoad: newData => state.data = newData });

  const state = reactive({
    data: [] as any[],
  });

  return () => (
    <DemoRow title={i18n.$intl('page.sortList.title2').d('')}>
      <Table
        v-model:data={state.data}
        colDraggable
        rowDraggable
        border
        showRows={10}
      >
        <PlcIndex/>
        <Plc field={'id'} title={'1_编号'} fixed="left"/>
        <PlcGroup title={'2_分组'}>
          <Plc field={'size'} title={'2-1_尺寸'}/>
          <Plc field={'date'} title={'2-2_日期'}/>
        </PlcGroup>
        <Plc field={'color'} title={'3_颜色'} align="right"/>
        <PlcGroup title={'4_分组'}>
          <PlcGroup title={'4-1_分组'}>
            <Plc field={'name'} title={'4-1-1_名称'}/>
            <Plc field={'star'} title={'4-1-2_评分'}/>
          </PlcGroup>
          <Plc field={'id'} title={'4-2_编号'}/>
        </PlcGroup>
        <Plc field="size" title="5_尺寸"/>
        <Plc field="date" title="6_日期"/>
        <Plc field="color" title="7_颜色"/>
        <Plc field="name" title="8_名称"/>
        <Plc field="star" title="9_评分" fixed="right"/>
      </Table>
    </DemoRow>
  );
});

export default designPage(() => {
  return () => <>
    <Demo1/>
    <Demo2/>
  </>;
});
